<!--
 * @FileDescription: 我的朗读页面
 * @Author: cjw
 * @Date: 2022/1/25 14:25
 -->
<template>
  <div>
    <el-table
      :data="reads"
      style="width: 100%">
      <el-table-column
        prop="heat"
        label="热度"
        width="180">
        <template slot-scope="scope">
          <el-progress :text-inside="true" :stroke-width="26" :percentage="scope.row.heat"></el-progress>
        </template>
      </el-table-column>
      <el-table-column
        prop="addTime"
        label="发布时间"
        width="200">
      </el-table-column>
      <el-table-column
        prop="topic"
        label="标题"
        width="360"
      >
      </el-table-column>
      <el-table-column
        prop="commentNum"
        label="评论数"
        width="100">
      </el-table-column>
      <el-table-column
        prop="loveNum"
        label="点赞数"
        width="100">
      </el-table-column>
      <el-table-column
        label="操作"
        width="150">
        <template slot-scope="scope">
            <el-switch
              v-model="scope.row.isPublic == 1"
              active-color="#13ce66"
              inactive-color="#ff4949"
              @change="changePower(scope.row)"
            >
            </el-switch>
          <i class="el-icon-view" style="color: #20a0ff; font-size: 20px" @click="listen(scope.row.id)"></i>
          <i class="el-icon-delete" style="color: red; font-size: 20px" @click="delRead(scope.row.id)"></i>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      layout="prev, pager, next"
      :total="total"
      @current-change="handleCurrentChange"
      style="text-align: right;margin-right: 120px"
    >
    </el-pagination>
    <div style="text-align: right; position: fixed; right: 0; bottom: 0">
      <i @click="doRecorder" style="font-size: 50px;color: red" class="el-icon-circle-plus" circle></i>
    </div>
  </div>
</template>

<script>
import {changePowerMyRead, delMyRead, getAllMyRead} from "@/api/myDesign";
import {sendMatomo} from "@/api/matomo";

export default {
  name: "myRead",
  created() {
    this.getAllReads()
  },
  data() {
    return {
      total: 1000,
      reads : [],
      page: 0,
      size: 10,
      find: ''
    }
  },
  methods: {
    doRecorder() {
      sendMatomo(12,'我的作品', '添加', '添加倾听')
      this.$router.push({name:'myRecorder'})
    },
    getAllReads() {
      getAllMyRead(this.page, this.size, this.find).then(res => {
        this.reads = res.body.data.dtos
        this.total = res.body.data.total
      })
    },
    listen(readId) {
      sendMatomo(13,'我的作品', '查询', '倾听详细,倾听id:'+readId)
      this.$router.push({name:'detailSoulSharing',query: {readId: readId}})
    },
    handleCurrentChange(page) {
      this.page = page-1
      this.getAllReads()
    },
    delRead(readId) {
      sendMatomo(11,'我的作品', '删除', '删除倾听,倾听id:'+readId)
      delMyRead(readId).then(res => {
        if (res.body.data)
          this.getAllReads()
      })
    },
    changePower(row) {
      sendMatomo(10,'我的作品', '修改', '改变倾听权限,倾听id:'+row.id)
      changePowerMyRead(row.id).then(res => {
        if (res.body.data)
          row.isPublic = !row.isPublic
      })
    }
  }
}
</script>

<style scoped>

</style>
